<include file="public@header"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>新增调课</title>
	<link rel="stylesheet" type="text/css" href="__STATIC__/user_center/css/ui.css">
	<link type="text/css" rel="stylesheet" href="__STATIC__/user_center/css/basic.css" />
	<style>
	h3{
	margin:0 0 0 30px;
	},
	p{
	text-align:center;
	margin-left:-50px;
	}
	</style>
</head>
<body>
<!--header 开始-->
  <header style="width:100%;">
    <div class="header" style="width:100%;"> 
		<a class="new-a-back" href="{:url('portal/WxAdmin/class_attendance_turn')}"><span style="text-indent:0px;"><返回</span></a>
		<h2>新增调课</h2>
		<!-- <a class="new-a-jd" id="trigger-overlay" href="javascript:void(0)"> <span>导航菜单</span> </a> -->
    </div>
  </header>
  <!--header 结束-->
  <!-- content开始 -->
	<div class="aui-container">
		<div class="aui-page">
			<div class="aui-page-my">
				<div class="aui-l-content">
				<form id="attendance_turn_form" method="post" action="{:url('portal/WxAdmin/class_attendance_turn_add_post')}" class="js-ajax-form">
					<div class="aui-menu-list aui-menu-list-clear">
						<!-- 表单 -->
							<input name="input_old_class_id" hidden></input>
							<input name="input_student_id" hidden></input>
							<input name="input_new_class_id" hidden></input>
						<!-- 表单结束 -->
						<ul style="background-color:#90EE90;">
							<li style="background-color:green;">
								<p style="color:#fff;text-align:center;width:100%;">调出</p>
							</li>
							<li class="b-line">
								<h3><a href="#selectClass" data-toggle="modal" id="old_class">原班级:</a></h3>
							</li>
							<li class="b-line">
								<h3><a href="#selectStudent" data-toggle="modal" id="student_name">学生姓名:</a></h3>
							</li>
							<li class="b-line">
								<h3>课次：<input type="number" name="input_old_class_times"></input></h3>
							</li>
						</ul>
						<ul style="background-color:#EEB4B4">
							<li style="background-color:red">
								<p style="color:#fff;text-align:center;width:100%;">调入</p>
							</li>
							<li class="b-line">
								<h3><a onclick="javascript:load_new_class();" href="#selectNew" data-toggle="modal" id="new_class">调入班级：</a></h3>
							</li>
							<li class="b-line">
								<h3>课次：<input type="number" name="input_new_class_times"></input></h3>
							</li>
						</ul>
					
					</div>
					<div class="aui-btn-item">
						<button class="ui-btn-lg ui-btn-primary js-ajax-submit" style="margin-top:10px;" type="submit">确定</button>
					</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- content结束 -->
	<!-- 功能项目 -->
	
	<!-- 选择班级开始 -->
		<div class="modal fade" id="selectClass" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel">
							选择班级
						</h4>
					</div>
					<div class="modal-body">
					<ul class="thumbnails">
						<foreach name="class" item="vo">
							<li class="span12" onclick="javascript:select_class('{$vo.id}','{$vo.name}')">
								<div class="thumbnail">
									<div class="caption">
										<h1 style="font-size:16px;">班级：{$vo.name}</h1>
										<p style="font-size:14px;">教室：{$vo.classroom}</p>
									</div>
								</div>
							</li>
						</foreach>
						<if condition="count($class)==0">
							<p align="center">没有查询到您的班级哦！</p>
						</if>
					</ul>
					</div>
					<div class="modal-footer">
						 <button type="button" class="ui-btn-lg ui-btn-primary" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	<!-- 选择班级结束 -->
	
	<!-- 选择学生开始 -->
		<div class="modal fade" id="selectStudent" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel">
							选择学生
						</h4>
					</div>
					<div class="modal-body" id="student_list">
						请先选择班级！
					</div>
					<div class="modal-footer">
						 <button type="button" class="ui-btn-lg ui-btn-primary" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	<!-- 选择学生结束 -->
	<!-- 选择调入班级 -->
		<div class="modal fade" id="selectNew" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel">
							选择调入班级
						</h4>
					</div>
					<div class="modal-body">
						<p id="new_class_list">加载中，请稍候……</p>
						<table id="new_class_list_data" class="table table-striped" hidden>
							<thead>
								<tr>
									<th>推荐班级</th>
									<th width="80px;">任课老师</th>
									<th width="50px;">教室</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button onclick="javascript:next_page();" id="next_class" class="ui-btn-lg ui-btn-danger" style="width:50%;float:left;visibility:hidden;">没有我要的班级</button>
						<button type="button" class="ui-btn-lg ui-btn-primary" data-dismiss="modal" style="width:50%;">关闭</button>
					</div>
				</div>
			</div>
		</div>	
	<!-- 选择调入班级结束 -->
	<!-- footer -->
</body>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script>
var flag = 0;page = 0;
function select_class(id,name){
	$("#old_class").html('原班级：'+name);
	$("input[name='input_old_class_id']").val(id);
	$.ajax({
		url: "{:url('portal/WxAdmin/class_id_get_student')}",
		type: 'post',
		data:{'class_id':id},
		success: function (data) {
			if(data.length>0){
				var student_list = '<table class="table table-striped">'+
					'<thead>'+
						'<tr>'+
							'<th width="40px;">序号</th>'+
							'<th width="70px;">姓名</th>'+
							'<th>电话</th>'+
							'<th>备用电话</th>'+
						'</tr>'+
					'</thead>'+
					'<tbody>';
				for(var i = 0;i<data.length;i++){
					student_list += '<tr onclick="javascript:select_student(\''+data[i].id+'\',\''+data[i].student_name+'\')">'+
								'<td>'+(i+1)+'</td>'+
								'<td>'+data[i].student_name+'</td>'+
								'<td><a onclick="javascript:void(0);" href="tel:'+data[i].phone+'">'+data[i].phone+'</a></td>'+
								'<td><a href="tel:'+data[i].phone2+'">'+data[i].phone2+'</a></td>'+
							'</tr>';
				}
				student_list += '</tbody></table>';
				$("#student_list").html(student_list);
				flag=0;page=0;
				$("#student_name").html('学生姓名：');
				$("input[name='input_student_id']").val('');
				$("#new_class").html("调入班级：");
				$("#input_new_class_id").val('');
			}
			else{
				alert('当前班级没有学生！请重新选择班级！');
			}
		}
	});
	$("#selectClass").attr("style","display:none");
	$("#selectClass").removeClass("in");
	$("body").removeClass("modal-open");
	$(".modal-backdrop").remove();
}

function select_student(id,name){
	$("#student_name").html('学生姓名：'+name);
	$("input[name='input_student_id']").val(id);
	$("#selectStudent").attr("style","display:none");
	$("#selectStudent").removeClass("in");
	$("body").removeClass("modal-open");
	$(".modal-backdrop").remove();
}

function load_new_class(){
	var $old_class_id = $("input[name='input_old_class_id']").val();
	if($old_class_id==''){
		$("#new_class_list").html("请先选择原调课班级！");
	}
	else{
		$.ajax({
			url: "{:url('portal/WxAdmin/class_id_get_similar_class')}",
			type: 'post',
			data:{'class_id':$old_class_id},
			success: function (data) {
				var new_class_data_list = '';
				flag=0;
				for(var i = 0;i<data.length;i++){
					if(data[i].length>0){
						$("#new_class_list").hide();
						$("#new_class_list_data").show(); 
						$("#next_class").attr("style","width:50%;float:left;visibility:visible;");
						for(var j = 0;j<data[i].length;j++){
							new_class_data_list += '<tr hidden name="'+flag+'" onclick="javascript:select_new_class(\''+data[i][j].class_id+'\',\''+data[i][j].class_name+'\');">'+
														'<td>'+data[i][j].class_name+'</td>'+
														'<td>'+data[i][j].teacher_name+'</td>'+
														'<td>'+data[i][j].classroom_name+'</td>'+
													+'</tr>';
						}
						flag++;
						$("#new_class_list_data>tbody").html(new_class_data_list);
					}
				}
				$("tr[name=0]").show();
			}
		});
	}
}

function next_page(){
	if(page<flag-1){
		page++;
		$("tr[name]").hide();
		$("tr[name="+page+"]").show();
	}
	else{
		alert("已经没有更多班级信息了，将返回第一页");
		page = 0;
		$("tr[name]").hide();
		$("tr[name="+page+"]").show();
	}
}

function select_new_class(id,name){
	$("#new_class").html("调入班级："+name);
	$("input[name='input_new_class_id']").val(id);
	$("#selectNew").attr("style","display:none");
	$("#selectNew").removeClass("in");
	$("body").removeClass("modal-open");
	$(".modal-backdrop").remove();
}
</script>
</html>